<template>
	<view class="content">
		<u-notice-bar :text="title"  mode="closable" ></u-notice-bar>
		<u-swiper circular :list="list1"></u-swiper>
		<u-divider text="分割线" :dot="true"></u-divider>
		<u-tabs class="tab1"
		 :list="list2" 
		 :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
		>
		 <view
				slot="right"
				style="padding-left: 4px;"
				@tap="$u.toast('插槽被点击')"
		>
		<u-icon
				name="list"
				size="21"
				bold
		></u-icon>
		</view>
		</u-tabs>
		
		<!-- 消息栏 -->
		<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<view class="album">
					<view class="album__avatar">
						<image
							src="http://r7hvave5i.hn-bkt.clouddn.com/%E4%B8%8B%E8%BD%BD%20%283%29.jpg"
							mode="widthFix"
							style="width: 41px;"
						></image>
					</view>
					<view class="album__content">
						<u--text
								text="张三"
								type="primary"
								bold
								size="17"
						></u--text>
						<u--text
								margin="0 0 8px 0"
								text="今天社区要停电,请大家注意"
						></u--text>
						<u-album :urls="urls1" keyName="src2"></u-album>
					</view>
				</view>
				<view class="album">
					<view class="album__avatar">
						<image
							src="http://r7hvave5i.hn-bkt.clouddn.com/%E4%B8%8B%E8%BD%BD%20%283%29.jpg"
							mode="widthFix"
							style="width: 41px;"
						></image>
					</view>
					<view class="album__content">
						<u--text
								text="张三"
								type="primary"
								bold
								size="17"
						></u--text>
						<u--text
								margin="0 0 8px 0"
								text="今天社区要停电,请大家格外注意,提前准备号"
						></u--text>
						<u-album :urls="urls1" keyName="src2"></u-album>
					</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '悦生活小区今日将有两家超市开业，开业第一天就送手机',
				list1: [
							'https://cdn.uviewui.com/uview/swiper/swiper1.png',
							'https://cdn.uviewui.com/uview/swiper/swiper2.png',
							'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				list2: [
					{
						name: '关注',
					}, 
					{
						name: '物业',
					}, 
					{
						name: '电影'
					}, 
					{
						name: '科技'
				}],
				urls1: [{
					src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}]
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
    .album {
        @include flex;
        align-items: flex-start;

        &__avatar {
             background-color: $u-bg-color;
             padding: 1px;
             border-radius: 3px;
         }
    
        &__content {
             margin-left: 10px;
             flex: 1;
         }
    }
</style>
